<script lang="ts" setup>
import { ref } from 'vue'
import { batterySizeType } from '@/api/bike/types/bike'
const dialogVisible = ref<boolean>(false)
const open = () => {
  dialogVisible.value = true
}
const batterySize = ref<batterySizeType[]>([])
const setData = (data: batterySizeType[]) => {
  batterySize.value = data
}
defineExpose({ open, setData })
</script>

<template>
  <el-dialog
    title="适用尺寸示意图"
    v-model="dialogVisible"
    width="auto"
    class="battery-size-dialog"
    :modal="false"
    modal-class="battery-size-modal"
  >
    <div v-for="item in batterySize" :key="item.batterySizesId">
      <div class="battery-detail" flex items-center>
        <span class="circle-number" mr-5 :data-number="item.batterySizesId" /><span>{{
          item.volt
        }}</span
        ><span mr-5>{{ item.current }}</span
        ><span class="battery-detail-small">({{ item.name }})</span>
      </div>
      <div>
        <img :src="item.imageUrl" alt="" />
      </div>
    </div>
  </el-dialog>
</template>

<style scoped></style>
